<template>
<footer class="footer">
  <div class="footer-content">
    <div class="link-container">
      <ul class="footer-links">
        <li><router-link class="footer-item" to="/">首页</router-link></li>
        <li><router-link class="footer-item" to="/about">走进才知</router-link></li>
        <li><router-link class="footer-item" to="/news">才知动态</router-link></li>
        <li><router-link class="footer-item" to="/missions">集团业务</router-link></li>
        <li><router-link class="footer-item" to="/culture">集团文化</router-link></li>
        <li><router-link class="footer-item" to="/careers">人力资源</router-link></li>
      </ul>
    </div>
  </div>
  <div class="footer-bottom">
    <div class="contact-info">
      <p><el-icon><Location /></el-icon> 地址：北京市朝阳区科技园区88号</p>
      <p><el-icon><Phone /></el-icon> 电话：010-88888888</p>
      <p><el-icon><Message /></el-icon> 邮箱：contact@company.com</p>
    </div>
    <p>© 2024 公司名称 版权所有</p>
    <p>京ICP备XXXXXXXX号-1 | 京公网安备XXXXXXXXXXXXX号</p>
  </div>
</footer>
</template>

<script setup>
import { Location, Phone, Message } from '@element-plus/icons-vue'
</script>

<style scoped>
.footer {
  background-color: #8B4513; /* 深蓝色背景 */
  color: #fff;
  margin-top: 40px;
  width: 100vw;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-content {
  width: 100vw;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.contact-info {
  margin: 15px 0;
}

.contact-info p {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  justify-content: center;
}

.contact-info .el-icon {
  margin-right: 10px;
  color: #ffd700; /* 金色图标 */
}

.footer-bottom {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  border-top: 1px solid #3949ab; /* 深蓝色分隔线 */
  padding: 10px 0;
}

.footer-bottom p {
  color: #e8eaf6; /* 浅蓝色文字 */
  margin: 5px 0;
  font-size: 14px;
}

.link-container {
  width: 100%; /* 设置最大宽度 */
  background-color: #8B4513;
  margin: 0 auto; /* 水平居中 */
  display: flex;
  justify-content: center; /* 水平居中 */
}

ul.footer-links {
  display: flex;
  justify-content: space-between; /* 等距分割 */
  align-items: center; /* 垂直居中 */
  width: 100%; /* 设置宽度 */
  list-style: none; /* 去掉默认的列表样式 */
  padding: 0; /* 去掉默认的内边距 */
  margin: 0 auto; /* 水平居中 */
  height: 50px;
}

ul.footer-links li {
  text-align: center; /* 文字居中对齐 */
  flex: 1; /* 平均分配空间 */
}

ul.footer-links .footer-item {
  text-decoration: none; /* 去掉默认的下划线 */
  color: inherit; /* 继承父元素的颜色 */
  transition: color 0.3s ease; /* 添加颜色过渡效果 */
  display: block;
  padding: 0 15px;
}

ul.footer-links .footer-item:hover {
  color: gold; /* 鼠标悬浮时字体颜色变为金色 */
}
</style> 